<template>
    <div class="user flex items-center gap-8">
        <div class="actions flex gap-2" v-if="!userStore.isLogin">
            <!-- <a-button> <router-link :to="PageRouteEnum.LOGIN">登录</router-link> </a-button> -->
            <div
                class="hidden cursor-pointer text-sm font-medium transition-colors hover:text-gray-600 md:block"
                @click="$router.push(PageRouteEnum.LOGIN)"
            >
                登录
            </div>
            <button class="md:hidden">
                <!-- <i class="fas fa-bars text-lg"></i> -->
                <!-- <Icon icon="fa-bars" /> -->
                <router-link
                    class="mr-1 cursor-pointer text-sm font-medium transition-colors hover:text-gray-600"
                    :to="PageRouteEnum.LOGIN"
                    >登录</router-link
                >
            </button>
        </div>
        <div class="userinfo flex gap-2" v-else>
            <a-dropdown :arrow="{ pointAtCenter: true }">
                <a-avatar :src="userStore.userinfo?.avatar" />

                <template #overlay>
                    <a-menu>
                        <a-menu-item>
                            <router-link :to="PageRouteEnum.USER_PROFILE">个人信息</router-link>
                        </a-menu-item>
                        <a-menu-item>
                            <!-- <router-link :to="PageRouteEnum.USER_SETTINGS">个人设置</router-link> -->
                            <router-link to="/user/comments">我的评论</router-link>
                        </a-menu-item>
                        <a-menu-item>
                            <router-link :to="PageRouteEnum.LOGIN" @click="userStore.logout()">退出登录</router-link>
                        </a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>
            <a-space class="cursor-pointer">
                <div class="name">{{ userStore.userinfo?.nickname }}</div>
                <div class="email">{{ userStore.userinfo?.email }}</div>
            </a-space>
        </div>
        <div
            @click="$router.push(AdminPageRouteEnum.HOME)"
            class="cursor-pointer text-sm text-gray-400 hover:text-black"
        >
            进入管理后台
        </div>
    </div>
</template>

<script setup lang="ts">
import { AdminPageRouteEnum, PageRouteEnum } from "@/router/routes";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
</script>

<style scoped lang="scss"></style>
